<template>
	<view class="main">

        <ul class="nav">
			<!-- <li :class = "{active:!(1-menuIndex)}" @click = 'menuShow(0)'>
				全部
			</li> -->
			
			<li v-for="(item,index) in navList" :key="index" :class = "{active:!(index-menuIndex)}" @click = 'menuShow(index,item.id)'>
					{{item.title}}({{item.num}}) 
			</li>
		</ul>
		
        <view class="hu" >
            <!-- <hxele :jdata="huxing"></hxele> -->
			<view v-for="(item, index) in huxing" :key="index" class="bd" @click="hux(item.id,loupan_id)">

				<view class="house-type-list card-list-box">
					<view class="house-type-item">
						<view class="pic">
							<img class="lazy-timeout-click" :src="item.image" />
						</view>
						<view class="text">
							<view class="text">
								<view class="name">
									<view class="lb-area"></view>
									<h4>{{item.name}}</h4>
								</view>

								<view class="area">
									建面：<span class="num-area">{{item.area}}</span>
								</view>

								<view class="total-price">
									参考总价：<span class="price-num">{{item.total}}</span>
								</view>

								<view class="h-lb-area">
									<span v-for="(item2, index2) in item.cate_type_arr" :key="index2">{{item2}}</span>
								 
								</view>

							</view>
						</view>
					</view> 
				</view>     
			</view>
        </view>

        <!-- <view class="hu" v-show = 'menuIndex == 1'>
            <hxele></hxele>
        </view> -->
		
	</view>
</template>

<script>
    // import Hxele from 'pages/index/details/Hxele'

	export default {
        components: {	
            // Hxele
		},
		data() {
			return {
				loupan_id:0,
				huxing_id:0,
				menuIndex:0,
				navList:[],
				huxing:[]
			}
		},
		
		onLoad(e) {
			this.loupan_id = e.loupan_id;
			this.initData();
		},
		
		methods: {
			initData() {
				let _this = this;
				this.$api.getPageUnit({
						loupan_id:_this.loupan_id,
						huxing_id:_this.huxing_id
					},
					res => {
						this.loupam_num = res.loupam_num;
						this.navList = [{title:'全部',num:res.loupam_num,id:0}];
						for(let i=0;i<res.huxing_info.length;i++){
							this.navList.push(res.huxing_info[i]); 
						}
						this.huxing = res.huxing;
					}
				);
			},
			menuShow (index,huxing_id) {
				this.menuIndex = index;
				this.huxing_id = huxing_id;
				this.initData();
			},
			hux(huxing_id,loupan_id){
				this.$common.navigateTo("../type/Type?loupan_id="+loupan_id+'&huxing_id='+huxing_id);
			}
		}
	}
</script>

<style scoped>
	*{
		list-style: none;
		padding: 0 ;
		margin: 0;
	}

    .nav{
        padding-top: 40upx;
    }
    .main{
        background: #fff;
    }
	.main>ul{
		width: 600upx;
		display: flex;
		flex-wrap: nowrap;
		/* margin: 0 auto; */
        margin-left: 40upx;
		padding-bottom: 10upx;
	}
	.main>ul>li{
		height: 54upx;
		width: 148upx;
		text-align: center;
		line-height: 54upx;
        /* color: #77808a; */
		font-size: 24upx;
        border-radius:6upx; 
	}
	.active{	
        background: #13c3c3;
		color:#fff;
        border-radius:6upx;       
	}

    .hu{
        margin: 0 40upx 0 40upx;
    }



	*{
	    margin: 0;
	    padding: 0 ;
	    list-style: none;
	}
	.bd{
	    padding-bottom: 20rpx;
	}
	.house-type-list{
	    height: 168rpx;
	    margin-top: 20rpx;
	}
	
	.pic{
	    height: 168;
	    width: 224rpx;
	    float: left;
	}
	.pic>img{
	    height: 168rpx;
	    width: 224rpx;
	}
	
	.text{
	    float: left;
	    margin-left: 40rpx;
	}
	
	.area,.total-price,.h-lb-area{
	    font-size: 24rpx;
	    color: #77808a;
	    margin-top: 8rpx;
	     width: 360rpx;
	}
	.price-num{
	    color: #fa5f35;
	    font-weight: 700;
	    font-size: 28rpx;
	}
	
	.h-lb-area>span{
	    height: 36rpx;
	    padding: 0 8rpx;
	    border:1px solid #77808a;
	    border-radius: 4rpx;
	    margin-right: 20rpx;
	}
</style>
